<script setup>
import { RouterLink } from 'vue-router'
import { ref } from 'vue'

// 学习进度数据
const learningProgress = ref({
  basics: 0,
  communication: 0,
  slots: 0,
  switching: 0,
  builtin: 0,
  mixins: 0
})

// 课程数据
const courses = ref([
  {
    id: 'basics',
    title: '组件注册与使用',
    description: '学习如何注册和使用Vue组件，包括全局注册和局部注册',
    route: '/component-basics',
    icon: '🧩',
    difficulty: '初级',
    estimatedTime: '30分钟'
  },
  {
    id: 'communication',
    title: '组件通信',
    description: '掌握组件间通信的各种方式：props、自定义事件、provide/inject、refs、pinia等',
    route: '/component-communication',
    icon: '💬',
    difficulty: '中级',
    estimatedTime: '60分钟'
  },
  {
    id: 'slots',
    title: '插槽教程',
    description: '深入理解插槽机制：默认插槽、具名插槽、作用域插槽',
    route: '/component-slots',
    icon: '🔌',
    difficulty: '中级',
    estimatedTime: '45分钟'
  },
  {
    id: 'switching',
    title: '组件切换',
    description: '学习组件的动态切换：条件渲染、动态组件',
    route: '/component-switching',
    icon: '🔄',
    difficulty: '中级',
    estimatedTime: '40分钟'
  },
  {
    id: 'builtin',
    title: '内置组件',
    description: '掌握Vue内置组件：transition、teleport、suspense、keep-alive',
    route: '/builtin-components',
    icon: '⚡',
    difficulty: '高级',
    estimatedTime: '90分钟'
  },
  {
    id: 'mixins',
    title: '混入 Mixins',
    description: '复用逻辑的传统方式：合并策略、生命周期与冲突处理',
    route: '/mixins',
    icon: '🧬',
    difficulty: '中级',
    estimatedTime: '40分钟'
  },
  {
    id: 'reactive',
    title: 'reactive 基础',
    description: '使用 reactive 创建响应式对象，掌握组合式 API 核心概念',
    route: '/zuheapi/reactive',
    icon: '⚛️',
    difficulty: '初级',
    estimatedTime: '20分钟'
  },
  {
    id: 'setup',
    title: 'setup 函数',
    description: 'setup 函数基础：定义数据、方法并返回给模板使用',
    route: '/zuheapi/setup',
    icon: '⚙️',
    difficulty: '初级',
    estimatedTime: '25分钟'
  },
  {
    id: 'setupPropsContext',
    title: 'props 与 context',
    description: '在 setup 中使用 props 接收数据，通过 context 触发事件',
    route: '/zuheapi/setup-props-context',
    icon: '📡',
    difficulty: '中级',
    estimatedTime: '35分钟'
  }
])

// 获取难度颜色
const getDifficultyColor = (difficulty) => {
  switch (difficulty) {
    case '初级': return '#52c41a'
    case '中级': return '#faad14'
    case '高级': return '#f5222d'
    default: return '#1890ff'
  }
}
</script>

<template>
  <div class="component-learning">
    <!-- 页面头部 -->
    <div class="header">
      <h1 class="title">Vue 组件学习中心</h1>
      <p class="subtitle">系统学习Vue组件的各个方面，从基础到高级</p>
    </div>

    <!-- 学习路径 -->
    <div class="learning-path">
      <h2 class="section-title">📚 学习路径</h2>
      <div class="path-container">
        <div class="path-line"></div>
        <div class="course-grid">
          <div 
            v-for="(course, index) in courses" 
            :key="course.id"
            class="course-card"
            :class="{ 'completed': learningProgress[course.id] === 100 }"
          >
            <div class="course-number">{{ index + 1 }}</div>
            <div class="course-icon">{{ course.icon }}</div>
            <h3 class="course-title">{{ course.title }}</h3>
            <p class="course-description">{{ course.description }}</p>
            
            <div class="course-meta">
              <span 
                class="difficulty-badge"
                :style="{ backgroundColor: getDifficultyColor(course.difficulty) }"
              >
                {{ course.difficulty }}
              </span>
              <span class="time-badge">⏱️ {{ course.estimatedTime }}</span>
            </div>

            <div class="progress-bar">
              <div 
                class="progress-fill"
                :style="{ width: learningProgress[course.id] + '%' }"
              ></div>
            </div>

            <RouterLink :to="course.route" class="start-btn">
              {{ learningProgress[course.id] > 0 ? '继续学习' : '开始学习' }}
            </RouterLink>
          </div>
        </div>
      </div>
    </div>

    <!-- 快速导航 -->
    <div class="quick-nav">
      <h2 class="section-title">🚀 快速导航</h2>
      <div class="nav-grid">
        <RouterLink to="/component-basics" class="nav-item basics">
          <div class="nav-icon">🧩</div>
          <div class="nav-text">
            <h4>组件基础</h4>
            <p>注册与使用</p>
          </div>
        </RouterLink>
        
        <RouterLink to="/component-communication" class="nav-item communication">
          <div class="nav-icon">💬</div>
          <div class="nav-text">
            <h4>组件通信</h4>
            <p>数据传递</p>
          </div>
        </RouterLink>
        
        <RouterLink to="/component-slots" class="nav-item slots">
          <div class="nav-icon">🔌</div>
          <div class="nav-text">
            <h4>插槽机制</h4>
            <p>内容分发</p>
          </div>
        </RouterLink>
        
        <RouterLink to="/component-switching" class="nav-item switching">
          <div class="nav-icon">🔄</div>
          <div class="nav-text">
            <h4>组件切换</h4>
            <p>动态渲染</p>
          </div>
        </RouterLink>
        
        <RouterLink to="/builtin-components" class="nav-item builtin">
          <div class="nav-icon">⚡</div>
          <div class="nav-text">
            <h4>内置组件</h4>
            <p>高级特性</p>
          </div>
        </RouterLink>

        <RouterLink to="/mixins" class="nav-item mixins">
          <div class="nav-icon">🧬</div>
          <div class="nav-text">
            <h4>混入 Mixins</h4>
            <p>复用逻辑</p>
          </div>
        </RouterLink>

        <RouterLink to="/zuheapi/reactive" class="nav-item reactive">
          <div class="nav-icon">⚛️</div>
          <div class="nav-text">
            <h4>reactive 基础</h4>
            <p>响应式对象</p>
          </div>
        </RouterLink>

        <RouterLink to="/zuheapi/setup" class="nav-item setup">
          <div class="nav-icon">⚙️</div>
          <div class="nav-text">
            <h4>setup 函数</h4>
            <p>入口函数</p>
          </div>
        </RouterLink>

        <RouterLink to="/zuheapi/setup-props-context" class="nav-item props-context">
          <div class="nav-icon">📡</div>
          <div class="nav-text">
            <h4>props 与 context</h4>
            <p>参数与事件</p>
          </div>
        </RouterLink>
      </div>
    </div>

    <!-- 学习提示 -->
    <div class="learning-tips">
      <h2 class="section-title">💡 学习建议</h2>
      <div class="tips-grid">
        <div class="tip-card">
          <div class="tip-icon">📖</div>
          <h4>循序渐进</h4>
          <p>建议按照学习路径的顺序进行，每个知识点都有前后关联</p>
        </div>
        
        <div class="tip-card">
          <div class="tip-icon">💻</div>
          <h4>动手实践</h4>
          <p>每个教程都包含可运行的示例，建议跟着代码一起练习</p>
        </div>
        
        <div class="tip-card">
          <div class="tip-icon">🔍</div>
          <h4>深入理解</h4>
          <p>不仅要知道怎么用，更要理解背后的原理和最佳实践</p>
        </div>
        
        <div class="tip-card">
          <div class="tip-icon">🎯</div>
          <h4>项目应用</h4>
          <p>学完后尝试在实际项目中应用，加深理解和记忆</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.component-learning {
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  color: white;
}

/* 页面头部 */
.header {
  text-align: center;
  margin-bottom: 40px;
}

.title {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 10px;
  background: linear-gradient(45deg, #fff, #e0e0e0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.subtitle {
  font-size: 1.2rem;
  opacity: 0.9;
  margin: 0;
}

/* 章节标题 */
.section-title {
  font-size: 1.8rem;
  margin-bottom: 20px;
  text-align: center;
  font-weight: 600;
}

/* 学习路径 */
.learning-path {
  margin-bottom: 50px;
}

.path-container {
  position: relative;
}

.path-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  z-index: 1;
}

.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  position: relative;
  z-index: 2;
}

.course-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 25px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.course-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.course-card.completed {
  border-color: #52c41a;
  background: rgba(82, 196, 26, 0.1);
}

.course-number {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
}

.course-icon {
  font-size: 3rem;
  text-align: center;
  margin-bottom: 15px;
}

.course-title {
  font-size: 1.3rem;
  margin-bottom: 10px;
  text-align: center;
}

.course-description {
  font-size: 0.9rem;
  opacity: 0.9;
  text-align: center;
  margin-bottom: 15px;
  line-height: 1.5;
}

.course-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.difficulty-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
  color: white;
}

.time-badge {
  font-size: 12px;
  opacity: 0.8;
}

.progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  margin-bottom: 15px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #52c41a, #73d13d);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.start-btn {
  display: block;
  width: 100%;
  padding: 12px;
  background: linear-gradient(45deg, #4facfe, #00f2fe);
  color: white;
  text-decoration: none;
  border-radius: 8px;
  text-align: center;
  font-weight: 500;
  transition: all 0.3s ease;
}

.start-btn:hover {
  background: linear-gradient(45deg, #00f2fe, #4facfe);
  transform: translateY(-2px);
}

/* 快速导航 */
.quick-nav {
  margin-bottom: 50px;
}

.nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  text-decoration: none;
  color: white;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.nav-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* Mixins 快速导航样式 */
.nav-item.mixins .nav-icon {
  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
}
.nav-item.mixins:hover {
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.35);
}

/* 组合式 API 进阶快速导航样式 */
.nav-item.reactive .nav-icon {
  background: linear-gradient(135deg, #f472b6 0%, #ec4899 100%);
}
.nav-item.reactive:hover {
  box-shadow: 0 8px 25px rgba(236, 72, 153, 0.35);
}

.nav-item.setup .nav-icon {
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
}
.nav-item.setup:hover {
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.35);
}

.nav-item.props-context .nav-icon {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
}
.nav-item.props-context:hover {
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.35);
}

.nav-icon {
  font-size: 2rem;
  margin-right: 15px;
}

.nav-text h4 {
  margin: 0 0 5px 0;
  font-size: 1.1rem;
}

.nav-text p {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.8;
}

/* 学习提示 */
.learning-tips {
  margin-bottom: 30px;
}

.tips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.tip-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.tip-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.tip-icon {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.tip-card h4 {
  margin: 0 0 10px 0;
  font-size: 1.1rem;
}

.tip-card p {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.9;
  line-height: 1.5;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .component-learning {
    padding: 15px;
  }
  
  .title {
    font-size: 2.2rem;
  }
  
  .course-grid {
    grid-template-columns: 1fr;
  }
  
  .nav-grid {
    grid-template-columns: 1fr;
  }
  
  .tips-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .title {
    font-size: 1.8rem;
  }
  
  .course-card {
    padding: 20px;
  }
  
  .nav-item {
    padding: 15px;
  }
}
</style>